<template>
  <div>
    <CjConfirm :isShow="showCaptcha" :option="{title:'请输入验证码',clickCloseModal: false,closeOnComfirm: false}" @onConfirm="clickConfirm" @onCancel="hidCaptcha">
      <div class="c-pt20 c-pb30">
        <div class="c-flex-row c-aligni-center c-justify-sb c-pv6 c-bd1-mgray c-br10 c-pr10">
          <input @focus='inputFocus' @blur='inputBlur' v-model="imgCode" name="" placeholder="请输入验证码" class="c-fs24 c-pl30 c-lh36 c-w50 c-bd0 c-w0 c-flex-grow1" />
          <div class="c-flex-row c-ww170 c-hh48 c-ml20 c-justify-end">
            <img :src="$addXossFilter(codeImgInfo.img)" @click="getImgCode" class="c-w100 c-h" alt="">
          </div>
        </div>
      </div>
    </CjConfirm>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import CjConfirm from "@/plugin/cjConfirm/cjConfirm.vue";
let inputScrollTop = 0;
export default {
  name: "captchaPop",
  components: {
    CjConfirm
  },
  props: {
    showCaptcha: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    showCaptcha(val) {
      if (val) {
        this.getImgCode()
      }
    }
  },
  activated() {
  },
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem("themeName")
        ? localStorage.getItem("themeName")
        : "mb5",
      imgCode: '',
      codeImgInfo: '',
      isLoading: false,
    };
  },
  methods: {
    clickConfirm() {
      if (!this.imgCode) {
        this.$showCjToast({
          text: "请输入验证码",
          type: "warn",
          time: 1500
        });
        return;
      }
      let code = {
        captcha: this.imgCode,
        captchaKey: this.codeImgInfo.key
      }
      this.$emit('clickConfirm', code)
      this.imgCode = ''
    },
    getImgCode() {
      let $this = this;
      if ($this.isLoading == true) {
        return;
      }
      $this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}common/captcha`, res => {
        $this.codeImgInfo = res;
        $this.isLoading = false;
      }, failRes => {
        $this.isLoading = false;
      });
    },
    hidCaptcha() {
      this.imgCode = ''
      this.$emit('hidCaptcha')
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
  },
};
</script>

<style scoped>
</style>
